<!--
 * @Description: 收货单详情
 * @Author: wning
 * @Date: 2023-03-22 16:48:18
 * @LastEditors: wning
 * @LastEditTime: 2023-03-31 11:04:18
-->

<template>
  <x-sub-page :content="'发货单详情'" @goBack="handleBack">
    <div class="pricing-detail" v-loading="pageLoading">
      <div class="form-components">
        <div class="panl-title">
          <span>基础信息</span>
        </div>
      </div>
      <el-descriptions
        direction="vertical"
        :column="3"
        label-class-name="title-style"
        content-class-name="content-style"
      >
        <el-descriptions-item :label="$t('shipment.form.deliveryNoteNumber')">{{
          dataForm.number
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('shipment.form.state')">{{
          selectDictLabel(dictOptions['srm_delivery_note.state'], dataForm.state)
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('shipment.form.consignor')">{{ dataForm.consignor }}</el-descriptions-item>
        <!-- <el-descriptions-item label="状态">{{ dataForm.state }}</el-descriptions-item> -->
        <el-descriptions-item :label="$t('shipment.form.consignorPhone')">{{
          dataForm.consignorPhone
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('shipment.form.deliveryMethod')">{{
          selectDictLabel(dictOptions['srm_delivery_note.delivery_method'], dataForm.deliveryMethod)
        }}</el-descriptions-item>
        <!-- 自主 -->
        <template v-if="dataForm.deliveryMethod === 'self'">
          <el-descriptions-item :label="$t('shipment.form.shipper')">{{ dataForm.shipper }}</el-descriptions-item>
          <el-descriptions-item :label="$t('shipment.form.shipperPhone')">{{
            dataForm.shipperPhone
          }}</el-descriptions-item>
        </template>
        <!-- 物流 -->
        <template v-else>
          <el-descriptions-item :label="$t('shipment.form.logisticalCompany')">{{
            selectDictLabel(dictOptions['srm_delivery_note.logistical_company'], dataForm.logisticalCompany)
          }}</el-descriptions-item>
          <el-descriptions-item :label="$t('shipment.form.logisticalNumber')">{{
            dataForm.logisticalNumber
          }}</el-descriptions-item>
        </template>
        <el-descriptions-item :label="$t('shipment.form.deliveryDate')">{{
          replaceDateTime(dataForm.deliveryDate)
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('shipment.form.arrivalDate')">{{
          replaceDateTime(dataForm.arrivalDate)
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.creatBy')">{{
          dataForm.createName
        }}</el-descriptions-item>
        <el-descriptions-item :label="$t('financialSynergy.statement.ceratTime')">{{
          dataForm.createTime
        }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="margin-top" :column="1" direction="vertical">
        <el-descriptions-item :label="'附件'">
          <x-upload
            ref="fileUpload"
            :fileSize="30"
            :span="6"
            :isFileRemark="false"
            :edit-flag="false"
            :limit="9"
            :old-file-list="dataForm.deliveryNoteFileList"
            :file-type="['jpg', 'jpeg', 'png', 'ppt', 'pptx', 'pdf', 'xls', 'xlsx', 'doc', 'docx']"
            :tips="'支持上传PPT/PDF/EXCEL/WORD/PNG/JPG形式文件, 最多9个, 附件大小不超过30MB.'"
          >
          </x-upload>
        </el-descriptions-item>
      </el-descriptions>

      <div class="form-components">
        <div class="panl-title">
          <span>送货物料明细</span>
        </div>
      </div>
      <el-form ref="dataForm" :model="dataForm" :rules="dataRule">
        <x-table
          ref="tableCom"
          :isPagination="false"
          :data-source="dataForm.deliveryNoteDetailList"
          :row-key="'id'"
          :height="(dataForm.deliveryNoteDetailList.length > 5 ? dataForm.deliveryNoteDetailList.length : 5) * 42 + 50"
        >
          <el-table-column type="index" label="序号" width="50" align="center" fixed />
          <el-table-column
            v-for="(item, index) in columns"
            :key="index"
            :prop="item.prop"
            :fixed="item.fixed"
            :show-overflow-tooltip="true"
            :width="item.width"
            :min-width="item.minWidth || '-'"
            :label="item.label"
            :sortable="'custom'"
          >
            <template #default="scope">
              <span v-if="item.prop === 'deliveryDate'">{{ replaceDateTime(scope.row[item.prop]) }}</span>
              <span v-else-if="item.prop === 'materialUnit'">{{selectDictLabel(dictOptions['srm_material.material_unit'], scope.row[item.prop])}}</span>
              <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state">
            <template slot-scope="scope">
              {{ selectDictLabel(dictOptions['srm_delivery_note.state'], scope.row.state) }}
            </template>
          </el-table-column>
        </x-table>
      </el-form>
    </div>
  </x-sub-page>
</template>

<script>
  import { QueryDictMixin, cloneDeep, selectDictLabel, throttle, replaceDateTime } from '@package/utils'
  import { apiGetDeliveryDetail } from '@/modules/shipment/api/receivingManagement.js'
  import { detailColumns } from '@/modules/shipment/config/wholeOrderReceipt.js'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'DeliverDetail',
    mixins: [QueryDictMixin],
    inject: ['closePages'],
    data() {
      return {
        pageLoading: false,
        columns: detailColumns,
        srmDictKeys: [
          'srm_delivery_note.delivery_method',
          'srm_delivery_note.logistical_company',
          'srm_delivery_note.state',
          'srm_material.material_unit'
        ],
        dataForm: {
          deliveryNoteDetailList: []
        },
        isDetail: true,
        dataRule: {
          realityReceivedQuantity: [{ required: true, message: '请输入', trigger: 'blur' }]
        }
      }
    },
    mounted() {
      const {
        query: { id, isDetail }
      } = this.$route
      this.isDetail = isDetail
      this.initDictConfig()
      this.getInfo(id)
    },
    methods: {
      selectDictLabel,
      replaceDateTime,
      getTableHeight(arr) {
        console.log('arr ', (arr?.length || 1) * 42 + 38)
        return (arr?.length || 1) * 42 + 38
      },
      // 获取详情
      async getInfo(id) {
        const { data, code } = await apiGetDeliveryDetail(id)
        if (code === EnumApiCode.Success) {
          this.$nextTick(() => {
            this.dataForm = Object.assign(this.dataForm, cloneDeep(data))
          })
        }
      },
      handleBack() {
        this.$router.go(-1)
        this.closePages()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pricing-detail {
    padding: 0 20px;
    overflow: auto;
    .panl-title {
      height: 45px;
      // margin: 0 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ededed;
      margin-bottom: 16px;
      span {
        display: inline-block;
        height: 22px;
        line-height: 22px;
        color: #171c26;
        border-left: 2px solid #4474f6;
        padding-left: 12px;
        font-size: 16px;
        font-weight: 700;
      }
    }
    ::v-deep .title-style {
      color: #707683;
      font-size: 14px;
    }
    ::v-deep .content-style {
      padding-bottom: 20px;
      color: #333;
      font-size: 14px;
    }
    .table-title {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #707683;
      font-weight: normal;
    }
    ::v-deep .el-table .el-table__body tr {
      height: 56px;
    }
    ::v-deep .el-table .cell {
      line-height: 56px;
      height: 56px;
      display: flex;
      align-items: center;
    }
    ::v-deep .el-table__row .el-form-item {
      margin-bottom: 0;
    }
    ::v-deep .el-table__row .el-form-item__error {
      padding-top: 0;
    }
    ::v-deep .el-table__row .el-form-item__content {
      line-height: 32px;
    }
  }
</style>
